<template>
	<div class="funnel">
		<div class="item" v-for="(item, itemKey) in dataSource" :key="itemKey">
			<h3 class="title">
				<i class="iconfont">{{ words[itemKey] }}</i>
				<p v-show="showEdit">
					{{ dataSource[itemKey].customName }}
				</p>
				<a-input
					v-show="!showEdit"
					:value="dataSource[itemKey].customName"
					@pressEnter="handleTitle($event, itemKey)"
				/>
				<a-icon type="edit" class="edit" @click="handeEdit" />
			</h3>
			<!-- 标题 over -->
			<div class="exponent">
				<Indicators
					class="btn"
					:item="item"
					:itemKey="itemKey"
					:projectId="projectId"
					@changeEvent="handleEvent"
				/>
				<IndicatorsOperation
					class="icon"
					:item="item"
					:sum="sum"
					:itemKey="itemKey"
					@addCondition="handleAddCondition"
					@copyIndicators="handleCopyIndicators"
					@delIndicators="handleDelIndicators"
				/>
			</div>
			<!-- 指数over -->
			<div
				:class="`condition ${
					item.filter.conditions && item.filter.conditions.length >= 2 ? 'has-logic' : ''
				}`"
				v-if="item.filter"
			>
				<div
					class="condition-item"
					v-for="(obj, pkey) in item.filter.conditions"
					:key="obj.renderIndex"
				>
					<template v-if="!obj.conditions">
						<Conditions
							class="btn"
							:level="'parent'"
							:item="obj"
							:pkey="pkey"
							:itemKey="itemKey"
							:projectId="projectId"
							:eventCode="eventCode"
							@changeConditionAttr="handleConditionAttr"
						/>

						<ConditionFunction
							class="btn"
							:level="'parent'"
							:item="obj"
							:pkey="pkey"
							:itemKey="itemKey"
							:dataType="dataType"
							@changeAttrFunction="handleAttrFunction"
						/>

						<ConditionValue
							:item="obj"
							:projectId="projectId"
							:attrCode="obj.attr.attrType === attrCode ? obj.attr.attrCode : attrCode"
							:attrType="obj.attr.attrType === attrType ? obj.attr.attrType : attrType"
							:dataType="obj.attr.dataType === dataType ? obj.attr.dataType : dataType"
							@changeConditionValue="handleConditionValue"
							:functionCode="functionCode"
						/>
						<ConditionOperation
							class="icon"
							:level="'parent'"
							:item="obj"
							:pkey="pkey"
							:itemKey="itemKey"
							:pSum="item.filter.conditions.length"
							@addSubCondition="handleSubCondition"
							@DelCondition="handleDelCondition"
						/>
					</template>
					<template v-else>
						<div :class="`sub-children ${obj.conditions.length >= 2 ? 'has-logic' : ''}`">
							<div class="condition-item" v-for="(o, skey) in obj.conditions" :key="o.renderIndex">
								<Conditions
									class="btn"
									:level="'sub'"
									:item="o"
									:pkey="pkey"
									:subkey="skey"
									:itemKey="itemKey"
									:projectId="projectId"
									:eventCode="eventCode"
									@changeConditionAttr="handleConditionAttr"
								/>
								<ConditionFunction
									class="btn"
									:item="o"
									:level="'sub'"
									:pkey="pkey"
									:subkey="skey"
									:itemKey="itemKey"
									:dataType="dataType"
									@changeAttrFunction="handleAttrFunction"
								/>
								<ConditionValue
									:item="o"
									:projectId="projectId"
									:attrCode="attrCode"
									:attrType="attrType"
									:dataType="dataType"
									:functionCode="functionCode"
								/>
								<ConditionOperation
									class="icon"
									:level="'sub'"
									:item="obj"
									:pkey="pkey"
									:subkey="skey"
									:itemKey="itemKey"
									:sum="obj.conditions.length"
									@addSubCondition="handleSubCondition"
									@DelCondition="handleDelCondition"
								/>
							</div>

							<span class="sub logic" v-if="obj.conditions.length >= 2">
								<em
									:class="`${obj.relation === 'and' ? 'current' : ''}`"
									@click="changeLogic('and', itemKey, pkey)"
								>
									且
								</em>
								<em
									:class="`${obj.relation === 'or' ? 'current' : ''}`"
									@click="changeLogic('or', itemKey, pkey)"
								>
									或
								</em>
							</span>
						</div>
					</template>
				</div>
				<span class="logic" v-if="item.filter.conditions.length >= 2">
					<em
						:class="`${item.filter.relation === 'and' ? 'current' : ''}`"
						@click="changeLogic('and', itemKey, '')"
					>
						且
					</em>
					<em
						:class="`${item.filter.relation === 'or' ? 'current' : ''}`"
						@click="changeLogic('or', itemKey, '')"
					>
						或
					</em>
				</span>
			</div>
			<!-- 条件over -->
		</div>

		<div class="add-icon">
			<span @click="newAddIndicators">
				<a-icon type="plus-circle" class="iconfont" />
				添加漏斗步骤
			</span>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import {
	Indicators,
	IndicatorsOperation,
	Conditions,
	ConditionFunction,
	ConditionOperation,
	ConditionValue,
	CustomFilter
} from '@/components/screen/components/index'
import { words } from '../data/iconWord'
import '../components/style/style.scss'
import _ from 'lodash'

@Component({
	name: 'FunnelAnalysis',
	components: {
		Indicators,
		IndicatorsOperation,
		Conditions,
		ConditionFunction,
		ConditionValue,
		ConditionOperation,
		CustomFilter
	}
})
export default class extends Vue {
	@Prop() projectId!: number
	@Prop() defaultData!: any
	@Prop() defaultCondition!: { [key: string]: any }
	@Prop() defaultIindicators!: { [key: string]: any }
	@Prop() defaultGroups!: { [key: string]: any }

	private words = words
	private showEdit = true
	private curEdit!: any

	private dataSource = _.cloneDeep(this.defaultData)
	private sum = this.dataSource.length
	private addDefaultIindicators = this.defaultIindicators
	private addDefaultCondition = this.defaultCondition

	private eventCode: string = this.defaultIindicators.eventCode
	private attrCode: string = this.defaultCondition.attr.attrCode
	private attrType: string = this.defaultCondition.attr.attrType
	private dataType: string = this.defaultCondition.attr.dataType
	private functionCode: string = this.addDefaultCondition.functionCode

	// 指数切换
	private handleEvent(params: { e: any; eventkey: number; itemKey: number }) {
		const { e, itemKey } = params
		this.dataSource = _.cloneDeep(this.dataSource)
		this.dataSource[itemKey].eventCode = e.item.value
		this.dataSource[itemKey].eventAlias = e.item.title

		this.eventCode = e.item.value
	}

	// 切换条件
	private handleConditionAttr(params: any) {
		const { e, type, level, itemKey, pkey, subkey } = params
		this.attrType = type

		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].attr = {
				attrType: type,
				dataType: e.item.role,
				attrCode: e.item.value,
				attrName: e.item.title
			}
			this.dataSource = _.cloneDeep(data)
			this.attrCode = e.item.value
			this.dataType = e.item.role
		} else {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].conditions[subkey].attr = {
				attrType: type,
				dataType: e.item.role,
				attrCode: e.item.value,
				attrName: e.item.title
			}

			this.dataSource = _.cloneDeep(data)
			this.attrCode = e.item.value
			this.dataType = e.item.role
		}
	}
	// 切换条件计算方式
	private handleAttrFunction(params: any) {
		const { e, level, pkey, subkey, itemKey } = params

		if (level === 'parent') {
			console.log('level p:', level)
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].functionCode = e.item.value
			data[itemKey].filter.conditions[pkey].functionAlias = e.item.title
			console.log('data: ', data)

			this.dataSource = _.cloneDeep(data)
			// this.functionCode = e.item.value
		} else {
			console.log('level s:', level)
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].conditions[subkey].functionCode = e.item.value
			data[itemKey].filter.conditions[pkey].conditions[subkey].functionAlias = e.item.title
			this.dataSource = _.cloneDeep(data)
			// this.functionCode = e.item.value
		}
	}
	// 条件值
	private handleConditionValue(params: any) {
		console.log(params)
	}
	// 条件逻辑切换
	private changeLogic(logic: string, itemKey: number, pkey: number) {
		if (!pkey) {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.relation = logic
			this.dataSource = _.cloneDeep(data)
		} else {
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions[pkey].relation = logic
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 显示编辑title
	private handeEdit() {
		this.showEdit = !this.showEdit
	}
	// 编辑title
	private handleTitle(e: any, itemKey: number) {
		const { value } = e.target
		const data = _.cloneDeep(this.dataSource)
		data[itemKey].indicatorName = value
		this.dataSource = _.cloneDeep(data)
		this.showEdit = !this.showEdit
	}
	// 添加指数
	private newAddIndicators() {
		this.dataSource = _.cloneDeep(this.dataSource)
		this.dataSource.push(this.addDefaultIindicators)
		this.sum = this.dataSource.length // 用于判断显示X指数
	}
	// 复制指数
	private handleCopyIndicators(item: any) {
		this.dataSource = _.cloneDeep(this.dataSource)
		this.dataSource.push(item)
		this.sum = this.dataSource.length // 用于判断显示 X指数
	}
	// 删除指数
	private handleDelIndicators(itemKey: number) {
		let data = _.cloneDeep(this.dataSource)
		const result = data.filter((obj: any, key: number) => {
			return key !== itemKey
		})
		this.dataSource = {
			...data,
			indicators: result
		}
		this.sum = this.sum - 1
	}
	// 增加条件：点击筛选icon
	private handleAddCondition(itemKey: number) {
		this.dataSource = _.cloneDeep(this.dataSource)
		const length = this.dataSource[itemKey].filter.conditions.length

		let newCondition = {
			renderIndex: length,
			...this.addDefaultCondition
		}

		this.dataSource[itemKey].filter.relation = length >= 1 ? 'and' : ''
		this.dataSource[itemKey].filter.conditions.push(newCondition)
	}
	// &操作
	private handleSubCondition(params: any) {
		const { level, pkey, itemKey } = params
		if (level === 'sub') {
			const target = this.dataSource[itemKey].filter.conditions[pkey].conditions
			const data = _.cloneDeep(this.dataSource)
			const newCondition = {
				renderIndex: target.length,
				...this.addDefaultCondition
			}
			data[itemKey].filter.conditions[pkey].conditions.push(newCondition)
			this.dataSource = _.cloneDeep(data)
		} else {
			const curItem = this.dataSource[itemKey].filter.conditions[pkey]
			delete curItem.renderIndex
			// 组合新增条件
			let newCondition = {
				relation: 'and',
				renderIndex: pkey,
				conditions: [
					{
						renderIndex: 0,
						...curItem
					},
					{
						renderIndex: 1,
						...this.addDefaultCondition
					}
				]
			}
			const target = this.dataSource[itemKey].filter.conditions

			// 替换新增条件
			const res = target.map((item: any) => {
				return item.renderIndex === curItem.renderIndex ? newCondition : item
			})
			const data = _.cloneDeep(this.dataSource)
			data[itemKey].filter.conditions = res
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 删除条件
	private handleDelCondition(params: any) {
		const { level, pkey, subkey, itemKey, item } = params
		let result
		let target
		if (level === 'sub') {
			target = this.dataSource[itemKey].filter.conditions[pkey].conditions
			let filterResult = target.filter((obj: any) => {
				return obj.renderIndex !== item.conditions[subkey].renderIndex
			})
			if (filterResult.length <= 1) {
				const single = _.cloneDeep(filterResult)
				delete single[0].renderIndex
				result = {
					renderIndex: `${subkey}`,
					...single[0]
				}
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter.conditions[pkey] = result
				this.dataSource = _.cloneDeep(data)
			} else {
				result = filterResult
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter.conditions[pkey].conditions = result
				this.dataSource = _.cloneDeep(data)
			}
		} else {
			target = this.dataSource[itemKey].filter.conditions
			let filterResult = target.filter((obj: any) => {
				return obj.renderIndex !== item.renderIndex
			})

			if (filterResult.length == 1 && filterResult[0].conditions) {
				const single = _.cloneDeep(filterResult)
				result = {
					relation: single[0].relation,
					conditions: [...single[0].conditions]
				}
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter = result
				this.dataSource = _.cloneDeep(data)
			} else {
				result = filterResult
				const data = _.cloneDeep(this.dataSource)
				data[itemKey].filter.conditions = result
				this.dataSource = _.cloneDeep(data)
			}
		}
	}
	@Watch('dataSource')
	private ChangedData() {
		console.log('this.dataSource1: ', this.dataSource)
		return this.dataSource
	}
}
</script>
